<template>
	<div>
		<div class="head2">
			<div>
				<h3><i class="el-icon-notebook-2"></i> <span>&nbsp;{{title}}</span></h3>
			</div>
		</div>
		<el-table :data="items" border style="width: 100%;" highlight-current-row>
			<el-table-column label="图片" width="180">
				<template slot-scope="scope">
					<div class="cartimg">
						<img :src="`http://127.0.0.1/api/public/showimg/${scope.row.book.pic}`"/>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="book.name" label="商品名称" min-width="180">
			</el-table-column>
			<el-table-column prop="price" label="商品价钱" width="180">
			</el-table-column>
			<el-table-column prop="num" label="商品数量" width="180">

			</el-table-column>
			<el-table-column label="商品总价">
				<template slot-scope="scope">
					<div>{{scope.row.price*scope.row.num}}</div>
				</template>
			</el-table-column>
		</el-table>

		<div class="max">
			<h3 v-show="readyPay==false">
				&nbsp;请确认完善收货人信息</h3>
			<h3 class="H32"
				v-show="readyPay== true">
				&nbsp;请确认订单号: {{ord.ordid}}</h3>
		</div>
		<div class="proper">
			<table width="85%">
				<tr>
					<td align="right">&nbsp;姓名&nbsp;</td>
					<td><el-input size="small" placeholder="请输入收货人姓名" v-model="ord.ship2name"
							:readonly="readyPay==true">
						</el-input></td>
				</tr>
				<tr>
					<td align="right">&nbsp;电话&nbsp;</td>
					<td><el-input size="small" placeholder="请输入收货人电话" v-model="ord.ship2phone"
							:readonly="readyPay==true">
						</el-input></td>
				</tr>
				<tr>
					<td align="right">&nbsp;地址&nbsp;</td>
					<td><el-input size="small" placeholder="请输入收货人地址" v-model="ord.ship2addr"
							:readonly="readyPay==true">
						</el-input></td>
				</tr>
			</table>
		</div>
		<div style="height: 2px; border-bottom: 3px lightblue solid;"></div>
		<div style="height: 10px;"></div>
		<div v-show="readyPay==false" style="display: flex; justify-content: space-between; line-height: 36px;">
			<div>
				<el-button size="mini" type="primary" @click="updateShip()" style="width: 250px;">更新个人的发货信息</el-button>
			</div>
			<div style="display: flex;">
				<h3>总价:&nbsp;</h3>
				<div style="min-width:80px; text-align: right; font-size: 1.4em; font-weight: 500;">
					{{$store.getters.totalPrice}} &yen;
				</div>
				<div style="width:50px"></div>
				<el-button size="small" type="danger" @click="makeOrder()" style="width: 200px;">下单</el-button>
			</div>
		</div>
		<div v-show="readyPay==true" style="display: flex; justify-content: space-between; line-height: 48px;">
			<div style="width: 50%;max-width: 50%;">
				<i></i> <span style="color:#F56C6C; font-size: 1.2em;">订单下单成功, 单号: </span>
				<span style="color: red; font-weight: 800; font-size: 1.2em;">{{ord.ordid}}</span>
			</div>
			<h3>总价:&nbsp;</h3>
			<div style="min-width:80px; text-align: right; font-size: 1.4em; font-weight: 800; color: #F56C6C;">
				{{ord.amount}} &yen;
			</div>
			<div style="width:50px"></div>
			<el-button size="small" type="danger" @click="makePay()" style="width: 220px;">去付款</el-button>
		</div>
		<div style="height: 10px;"></div>
		<div style="height: 2px; border-bottom: 3px lightblue solid;"></div>
	</div>
</template>

<script>
	export default {
		name: 'PCpayment',
		data() {
			return {
				ord: {
					ordid: 0,
					ship2addr: '',
					ship2phone: '',
					ship2name: '',
					carts: []
				},
				readyPay: false, // 下单成功, 准备去付款了吗? 把订单号传递到 pay.vue
				title: '下单-待从购物车转订单',
				items: []
			}
		},
		methods: {
			updateShip() {
				let obj = {};
				obj.nickname = this.ord.ship2name;
				obj.phone = this.ord.ship2phone;
				obj.addr = this.ord.ship2addr;

				this.$postx("/api/user/updateShip", obj).then((resp) => {
					this.$message.error(resp.data.msg)
				})
			},
			makeOrder() {
				this.readyPay = false;
				if (this.ord.ship2name.length < 2 || this.ord.ship2phone < 5 || this.ord.ship2addr < 4) {
					this.$message.warning("请输入收货人具体信息 .....");
					return;
				}
				console.log(this.items);
				this.ord.carts = this.items;
				console.log(this.ord)
				this.$postj("/api/fore/cart/add2Order", this.ord)
					.then(resp => {
						if (resp.data.data.code = 200) {
							let ordObj = resp.data.data; // 新的订单头对象
							this.ord.ordid = ordObj.ordid;
							this.ord.amount = ordObj.amount;
							this.$message.success("下单成功, 订单号:" + this.ord.ordid);
							this.readyPay = true;
							this.title = '下单成功-待付款';
							this.$store.state.goods = [];
						} else {
							this.$message.error("下单失败");
							this.readyPay = fasle;
						}
					})
			},

			makePay() { //转去付款的页面, 并带上该订单号, 需要重新查询的
				this.$router.push('/pc/par2?ordid=' + this.ord.ordid)
			} 
		},
		mounted() {
			for (let i = 0; i < this.$store.state.goods.length; i++) {
				let item = {
					book: {}
				};
				item.book.id = this.$store.state.goods[i].book.id;
				item.price = this.$store.state.goods[i].price;
				item.num = this.$store.state.goods[i].num;
				item.id = this.$store.state.goods[i].id;
				this.items.push(this.$store.state.goods[i]);
			}
			this.$get("/api/user/shipInfo")
				.then(resp => {
					console.log("获取收货人的地址信息")
					console.log(resp.data.data)
					this.ord.ship2addr = resp.data.data.addr + "";
					this.ord.ship2phone = resp.data.data.phone + "";
					this.ord.ship2name = resp.data.data.name + "";
				})
		}
	}
</script>

<style scoped>
	.cartimg img{
		display: block; 
		width: 100%; 
		height: 100%; 
	}
	.max{
		height: 30px;  
		background-color:  #DCDFE6;
	}
	.max h3{
		border-left: 5px lightgray solid; 
		border-top: 3px solid lightgrey;
		color: #3F7FCE;
	}
	.max .H32{
		border-left: 5px lightgray solid; 
		border-top: 3px solid lightgrey; 
		color: #F56C6C;
	}
</style>